<template>
  <div class="log-operation">
    <el-collapse class="search-block" style="width: 1120px">
      <el-collapse-item title="条件搜索">
        <!-- 订单编号、客户编号、客户姓名、日志类型、记录时间  -->
        <el-form ref="searchLogForm" :model="searchLogForm" label-position="top">
          <el-form-item class="search-item" label="日志编号" prop="logId">
            <el-input type="text" v-model="searchLogForm.logId" style="width: 300px" placeholder="请输入日志编号" />
          </el-form-item>
          <el-form-item class="search-item" label="客户编号" prop="userId">
            <el-input type="text" v-model="searchLogForm.userId" style="width: 200px" placeholder="请输入客户编号" />
          </el-form-item>
          <el-form-item class="search-item" label="客户姓名" prop="username">
            <el-input type="text" v-model="searchLogForm.username" style="width: 200px" placeholder="请输入客户姓名"
              maxlength="10" />
          </el-form-item>
          <el-form-item class="search-item" label="日志类型" prop="logType">
            <el-select v-model="searchLogForm.logType" placeholder="请选择日志类型" style="width: 200px">
              <el-option label="申请" value="apply"></el-option>
              <el-option label="登录" value="login"></el-option>
              <el-option label="登出" value="exit"></el-option>
              <el-option label="订单" value="order"></el-option>
              <el-option label="其它" value="other"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="记录时间" class="search-item" prop="logTime">
            <div class="block">
              <el-date-picker v-model="searchLogForm.logTime" type="daterange" align="right" unlink-panels
                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
              </el-date-picker>
            </div>
          </el-form-item>
          <div class="search-button" style="margin-top: 100px">
            <el-button type="warning" icon="el-icon-search" @click="getLogTableList()">搜 索</el-button>
            <el-button icon="el-icon-delete" @click="resetSearchForm('searchLogForm')">重 置</el-button>
          </div>
        </el-form>
      </el-collapse-item>
    </el-collapse>

    <div class="log-table">
      <el-table :data="logTableList" stripe v-loading="logTableLoading">
        <el-table-column prop="log_id" label="日志编号" align="center" width="280px" show-overflow-tooltip />
        <el-table-column prop="user_id" label="客户编号" align="center" width="100px" show-overflow-tooltip />
        <el-table-column prop="user_name" label="客户姓名" align="center" width="120px" show-overflow-tooltip />
        <el-table-column prop="log_type" label="日志类型" align="center" width="100px">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.log_type === 'login'">登录</el-tag>
            <el-tag type="warning" v-else-if="scope.row.log_type === 'exit'">登出</el-tag>
            <el-tag type="danger" v-else-if="scope.row.log_type === 'apply'">申请</el-tag>
            <el-tag type="success" v-else-if="scope.row.log_type === 'order'">订单</el-tag>
            <el-tag type="info" v-else>其它</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="msg" label="日志内容" align="center" width="350px" show-overflow-tooltip />
        <el-table-column prop="log_time" label="记录时间" align="center" width="170px" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{
              scope.row.create_time | dateFormat("yyyy-mm-dd hh:mm:ss")
            }}</span>
          </template>
        </el-table-column>
      </el-table>
      <Pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getLogTableList" />
    </div>
  </div>
</template>

<script>
import { getLogList } from "@/api/log";
export default {
  name: "LogOperation",
  data() {
    return {
      logTableList: [],
      logTableLoading: false,
      searchLogForm: {
        logId: "",
        userId: "",
        username: "",
        logType: "",
        logTime: "",
      },
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        logId: "",
        userId: "",
        username: "",
        logType: "",
        firstLogDate: "",
        secLogDate: "",
      },
      total: 0,
    };
  },
  created() {
    this.getLogTableList();
  },
  methods: {
    getLogTableList() {
      this.packParams();
      this.logTableLoading = true;
      getLogList(this.queryParams)
        .then((res) => {
          this.logTableList = res.rows;
          this.total = res.total;
          this.logTableLoading = false;
        })
        .catch((err) => {
          this.userTableLoading = false;
        });
    },
    packParams() {
      let form = this.searchLogForm;
      if (form.userId != null && form.userId != "") {
        if (isNaN(paramsForm.userId)) {
          this.$message.error("客户编号是数字");
          return;
        }
      }
      this.queryParams.logId = form.logId;
      this.queryParams.userId = form.userId;
      this.queryParams.username = form.username;
      this.queryParams.logType = form.logType;
      this.queryParams.firstLogDate =
        form.logTime === null ? null : form.logTime[0];
      this.queryParams.secLogDate =
        form.logTime === null ? null : form.logTime[1];
    },
    resetSearchForm(formName) {
      this.$refs[formName].resetFields();
      this.getLogTableList();
    },
  },
};
</script>

<style>
.search-block {
  margin-bottom: 20px;
}

.el-collapse-item__header {
  color: #4091ff !important;
  font-size: 15px;
}

.search-item {
  display: inline-block;
  margin-left: 20px;
}

.el-form-item__label {
  padding-bottom: 0px !important;
}

.search-button {
  float: right;
  margin-bottom: 20px;
}
</style>